<template>
  <div class="nav">
    <div class="block logo">
      <p class="title" style="margin-top:2.1vh;">&nbsp;&nbsp;大湾区极端天气事件灾害链<br />综合监测和风险管控系统平台</p>
    </div>
    <div class="nav-menu" v-if="this.$store.state.isLogin">
      <div
        v-for="(menu, index) in menus"
        :key="menu.index"
        :class="['block', 'box', `box${index + 1}`]"
      >
        <el-dropdown @command="navigateTo" trigger="hover">
          <span class="el-dropdown-link title">{{ menu.title }}</span>
          <template #dropdown >
            <el-dropdown-menu class="abc">
              <el-dropdown-item
                v-for="item in menu.items"
                :key="item.index"
                :command="item"
                :style="{ fontSize: item.fontSize }"
                style="width: auto; height: 70px; color: black;"
                >{{ item.text }}
                <template v-if="item.children && item.children.length">
                  <span v-if="item.children.length >0" style="margin-left: 5px; margin-right: 5px;">></span>
                  <el-dropdown-item
                    v-for="child in item.children"
                    :key="child.index"
                    :command="child"
                    :style="{ fontSize: child.fontSize }"
                    style="color: black;"
                    >{{ child.text }}
                    <template v-if="child.grandchildren && child.grandchildren.length">
                      <span v-if="child.grandchildren.length > 0" style="margin-left: 5px; margin-right: 5px;">></span>
                      <el-dropdown-item
                        v-for="grandchild in child.grandchildren"
                        :key="grandchild.index"
                        :command="grandchild"
                        :style="{ fontSize: grandchild.fontSize }"
                        style="color: black;"
                        >{{ grandchild.text }}
                      </el-dropdown-item>
                    </template>
                  </el-dropdown-item>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="nav-menu" v-if="this.$store.state.isLogin">
        <div class="nav-user">
          <div class="avatar">
            <img class="avatar-img" src="../assets/User.png" />
          </div>
          <p class="nav-uid">{{ this.$store.state.userinfo.uid }}</p>
          <el-button @click="Loginout">退出登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";

export default {
  name: "Navbar",
  components: {
    // 在这里注册你的组件
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
  },
  data() {
    return {
      activeindex: "predict",
      menus: [
        {
          index: "1",
          title: "综合监测",
          items: [
            {
              index: "1-1",
              text: "天气监测",
              isBold: true,
              route: "/",
              menuIndex: 0,
              fontSize: '20px',
              children: [
                {
                  index: "1-1-1",
                  text: "卫星云图",
                  route: "/yuntu",
                  fontSize: '18px',
                },
                {
                  index: "1-1-2",
                  text: "雷达拼图",
                  route: "/radarPic",
                  fontSize: '18px',
                },
              ],
            },
            {
              index: "1-2",
              text: "灾害监测",
              isBold: true,
              route: "/",
              menuIndex: 1,
              fontSize: '20px',
              children: [
                {
                  index: "1-2-1",
                  text: "洪涝灾害监测",
                  route: "/floodMonitor",
                  fontSize: '18px',
                },
                {
                  index: "1-2-2",
                  text: "形变监测",
                  route: "/subsidenceMonitor",
                  fontSize: '18px',
                },
              ],
            },
          ],
        },

        {
          index: "2",
          title: "识别预警",
          items: [
            {
              index: "2-1",
              text: "识别",
              route: "/",
              menuIndex: 2,
              fontSize: '20px',
              children: [
                {
                  index: "2-1-1",
                  text: "灾害天气识别",
                  route: "/",
                  menuIndex: 2,
                  fontSize: '18px',
                  grandchildren: [
                    {
                      index: "2-1-1-1",
                      text: "QPE",
                      route: "/qpe",
                    },
                    {
                      index: "2-1-1-2",
                      text: "雷暴大风识别",
                      route: "/recognition",
                    },
                  ],
                },
                {
                  index: "2-1-2",
                  text: "灾害事件识别",
                  route: "/",
                  menuIndex: 2,
                  fontSize: '18px',
                  grandchildren: [
                    {
                      index: "2-1-2-1",
                      text: "台风预测",
                      route: "/typhoonPredict",
                    },
                    {
                      index: "2-1-2-2",
                      text: "卫星云图识别分类",
                      route: "/yuntuRecognition",
                    },
                  ],
                },
              ],
            },
            {
              index: "2-2",
              text: "预警",
              route: "/",
              menuIndex: 3,
              fontSize: '20px',
              children: [
                {
                  index: "2-2-1",
                  text: "灾害天气预警",
                  route: "/",
                  menuIndex: 3,
                  fontSize: '18px',
                  grandchildren: [
                    {
                      index: "2-2-1-1",
                      text: "QPF(DBZ)",
                      route: "/dbz",
                    },
                    {
                      index: "2-2-1-2",
                      text: "QPF(降水)",
                      route: "/rainfall",
                    },
                    {
                      index: "2-2-1-3",
                      text: "QPF(光流法)",
                      route: "/qpfgl",
                    },
                    {
                      index: "2-2-1-4",
                      text: "雷暴大风外推预警",
                      route: "/forecast",
                    },
                    {
                      index: "2-2-1-5",
                      text: "雷暴大风潜势预警",
                      route: "/convectivegust",
                    },
                    {
                      index: "2-2-1-6",
                      text: "强降水预警",
                      route: "/strongrain",
                    },
                    {
                      index: "2-2-1-7",
                      text: "大风预警",
                      route: "/wind",
                    },
                    {
                      index: "2-2-1-8",
                      text: "台风路径预测",
                      route: "/typhoon",
                    },
                  ],
                },
                {
                  index: "2-2-2",
                  text: "灾害事件预警",
                  route: "/",
                  menuIndex: 3,
                  fontSize: '18px',
                  grandchildren: [
                    {
                      index: "2-2-2-1",
                      text: "洪涝预测",
                      route: "/floodforecast",
                    },
                    {
                      index: "2-2-2-2",
                      text: "风暴增水预报",
                      route: "/storm",
                    },
                    {
                      index: "2-2-2-3",
                      text: "24小时最大增水",
                      route: "/hoursmax",
                    },
                    {
                      index: "2-2-2-4",
                      text: "内涝预警",
                      route: "/waterlogging",
                    },
                    {
                      index: "2-2-2-5",
                      text: "大湾区洪涝风险预评估",
                      route: "/GBA",
                    },
                    {
                      index: "2-2-2-6",
                      text: "深圳洪涝风险预评估",
                      route: "/SZ",
                    },
                  ],
                },
              ],
            },
          ],
        },

        {
          index: "3",
          title: "靶向发布",
          items: [
            {
              index: "3-1",
              text: "预警信号",
              route: "/",
              menuIndex: 4,
              fontSize: '20px',
              children: [
                {
                  index: "3-1-1",
                  text: "分区预警",
                  route: "/FQYJ",
                  fontSize: '18px',
                },
              ],
            },
            {
              index: "3-2",
              text: "精准靶向发布",
              route: "/",
              menuIndex: 5,
              fontSize: '20px',
              children: [],
            },
          ],
        },
        {
          index: "4",
          title: "模型与决策",
          items: [
            {
              index: "4-1",
              text: "识别技术与气候特征",
              route: "/",
              menuIndex: 6,
              fontSize: '20px',
              children: [{
                  index: "4-1-1",
                  text: "识别技术",
                  route: "/RecTechnology",
                  menuIndex: 6,
                  fontSize: '18px',
                },
                {
                  index: "4-1-2",
                  text: "气候特征",
                  route: "/Features",
                  menuIndex: 6,
                  fontSize: '18px',
                },],
            },
            {
              index: "4-2",
              text: "策略、方案与机制",
              route: "/",
              menuIndex: 7,
              fontSize: '20px',
              children: [{
                  index: "4-2-1",
                  text: "早期风险识别技术规范",
                  route: "/Strategy",
                  menuIndex: 7,
                  fontSize: '18px',
                },
                {
                  index: "4-2-2",
                  text: "平台说明手册",
                  route: "/Methods",
                  menuIndex: 7,
                  fontSize: '18px',
                },],
            },
            {
              index: "4-3",
              text: "地质灾害图谱",
              route: "/Overview",
              menuIndex: 8,
              fontSize: '20px',
              children: [
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    navigateTo(item) {
      const route = item.route;
      if (route != "/") {
        this.$router.push({
          path: route,
        });
      } else {
        this.activeindex = item.menuIndex;
        // this.$router.push({
        //   path: item.route,
        // });
        this.$emit("changeMenuIndex", this.activeindex);
      }
    },
    Loginout() {
      this.$store.commit("Loginout");
      this.$router.push({
        path: "/",
      });
    },
  },
  mounted() {
    this.activeindex = this.$route.fullPath.substring(1);
  },
};
</script>

<style scoped>
.nav {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.logo {
  left: -50px;
  height: 10vh !important;
  width: auto !important;
  padding: 0 3vw !important;
}

.box {
  cursor: pointer;
  justify-content: space-evenly;
}
.box1 {
  left: -6vw;
}
.box2 {
  left: -9vw;
}
.box3 {
  left: -12vw;
}
.box4 {
  left: -16vw;
}
.block {
  position: relative;
  overflow: hidden;
  height: 5vh;
  width: 15vw;
  display: flex;
  background: linear-gradient(
    90deg,
    rgba(20, 140, 138, 0) 0%,
    rgba(20, 102, 140, 1) 100%
  );
  flex-direction: column;
  align-items: center;
  padding: 0 1vw;
}

.block::before,
.block:not(.box)::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.block::before {
  bottom: 0;
  right: 0;
  border-width: 0 0 95px 50px; /* 调整三角形大小 */
  border-color: transparent transparent rgba(245, 250, 250, 1) transparent;
}

.block:not(.box1)::after {
  top: 0;
  left: 0;
  border-width: 95px 50px 0 0; /* 调整三角形大小 */
  border-color: rgba(245, 250, 250, 1) transparent transparent transparent;
}

.logo img {
  height: 70%;
  margin-left: 10px;
}

.block .title {
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
  font-size: 24px;
}

.title:focus {
  outline: 0;
}

.nav-menu {
  display: flex;
  align-items: flex-end;
}

.nav-user {
  display: flex;
  align-items: center;
}

.nav-user .avatar {
  border-radius: 50%;
  overflow: hidden;
  width: 3vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav-user .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-uid {
  margin: 0 10px;
  color: gray;
  font-weight: bold;
  font-size: 1vw;
}

.el-button {
  background: linear-gradient(
    90deg,
    rgba(20, 140, 138, 0) 0%,
    rgba(20, 102, 140, 1) 100%
  );
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 5px;
  color: white;
}

.el-button:hover {
  background: linear-gradient(
    0deg,
    rgba(20, 140, 138, 0) 0%,
    rgba(20, 102, 140, 1) 100%
  );
}

.el-menu-demo {
  border-bottom: solid 0px !important;
  width: 45vw;
  display: flex;
}
.abc {
  background: linear-gradient(
    0deg,
    rgba(20, 140, 138, 0) 0%,
    rgba(20, 102, 140, 1) 100%
  );
}
</style>
